<template>
    <div class="order-manage">
        <!-- 搜索条件 -->
        <div class="search-condition">
            <div class="condition">
                <!-- 搜索第一行 -->
                <div class="first-line">
                    <!-- 供应商编号 -->
                    <!--          <div class="search-wrapper special">-->
                    <!--            <div class="search-label">供应商编号：</div>-->
                    <!--            <el-input-->
                    <!--              class="search-input"-->
                    <!--              placeholder="请输入"-->
                    <!--              v-model="workOrderNo"-->
                    <!--              clearable-->
                    <!--            >-->
                    <!--            </el-input>-->
                    <!--          </div>-->
                    <!-- 手机号码 -->
                    <div class="search-wrapper">
                        <div class="search-label">手机号码：</div>
                        <el-input class="search-input" placeholder="请输入" v-model="phoneNumber" clearable></el-input>
                    </div>
                    <!-- 状态 -->
                    <div class="search-wrapper">
                        <div class="search-label">状态：</div>
                        <el-select v-model="workOrderStatus" placeholder="请选择" clearable>
                            <el-option
                                v-for="item in orderStatusList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="search">
                <el-row>
                    <el-button @click="resetQuery">重置</el-button>
                    <el-button type="primary" @click="resultQuery">查询</el-button>
                    <el-button type="text" @click="expandCondition">
                        展开
                        <i
                            :class="{
                                'el-icon-arrow-down': !expandConditionFlag,
                                'el-icon-arrow-up': expandConditionFlag
                            }"
                        ></i>
                    </el-button>
                </el-row>
            </div>
        </div>
        <!-- 内容区域 -->
        <div class="main-content" v-loading="loading">
            <!-- 操作按钮 -->
            <div class="handle-action">
                <el-row>
                    <el-button type="primary" @click="sceneProspect">新增</el-button>
                    <el-button type="primary" @click="reboot">启用</el-button>
                    <el-button type="primary" @click="quitOrder">停用</el-button>
                </el-row>
            </div>
            <!-- 表格 -->
            <div class="table">
                <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <!-- 状态 -->
                    <el-table-column label="状态" width="100">
                        <template slot-scope="scope">{{ status(scope.row.accountStatus) }}</template>
                    </el-table-column>
                    <!-- 编号 -->
                    <el-table-column prop="supplierCode" label="供应商编号" width="140"></el-table-column>
                    <!-- 名称 -->
                    <el-table-column prop="supplierName" label="名称" show-overflow-tooltip></el-table-column>
                    <!-- 手机号 -->
                    <el-table-column
                        prop="userPhone"
                        label="手机号"
                        width="140"
                        show-overflow-tooltip
                    ></el-table-column>
                    <!-- 姓名 -->
                    <el-table-column prop="userName" label="姓名" width="100"></el-table-column>
                    <!-- 创建人 -->
                    <el-table-column prop="createEmp" label="创建人" width="100"></el-table-column>
                    <!-- 创建时间 -->
                    <el-table-column prop="createTm" label="创建时间" width="160"></el-table-column>
                    <!-- 修改人 -->
                    <el-table-column prop="updateEmp" label="修改人" width="120"></el-table-column>
                    <!-- 修改人 -->
                    <el-table-column prop="updateTm" label="修改时间" show-overflow-tooltip></el-table-column>
                </el-table>
                <!-- 分页器 -->
                <el-pagination
                    class="pagination"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                ></el-pagination>
            </div>
        </div>
        <!-- 新增用户 -->
        <add-dialog v-if="sceneProspectFlag" :sceneProspectFlag="sceneProspectFlag" @closeDialog="closeDialog" />
        <!-- 重新启用 -->
        <reboot-dialog v-if="rebootFlag" :rebootFlag="rebootFlag" :accountId="accountId" @closeDialog="closeDialog" />
        <!-- 停用申请 -->
        <quit-dialog
            v-if="quitOrderFlag"
            :accountId="accountId"
            :quitOrderFlag="quitOrderFlag"
            @closeDialog="closeDialog"
        />
    </div>
</template>
<script lang="ts">
import ChildAccountManage from './ChildAccountMange.js';
export default {
    ...ChildAccountManage
};
</script>

<style scoped lang="less">
@import 'ChildAccountMange.less';
</style>
